<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 
        事件委托是利用事件流的特征解决一些开发需求的知识技巧
        优点:减少注册次数,可以提高程序性能
        原理:事件委托其实是利用事件冒泡的特点
            给父元素注册事件,当我们触发子元素的时候,会冒泡到父元素身上,从而触发父元素的事件
     -->
     <ul>
        <li>第一个孩子</li>
        <li>第二个孩子</li>
        <li>第三个孩子</li>
        <p>我不需要变颜色</p>
     </ul>
     <script>
        const ul = document.querySelector('ul');
        ul.addEventListener('click',function (e) {
            // alert(11);
            // this.style.color='red';
            // e.target.style.color='red';
            if(e.target.tagName==='LI'){
                e.target.style.color='red';
            }
          })
     </script>
</body>
</html>